<template>
	<div class="detail-dialog">
		<el-dialog v-model="showDialog" :show-close="false" width="75%" :destroy-on-close="true" :before-close="closeDialog">
			<template #header>
				<div class="my-header">
					<span>
						<h3>{{ title }}</h3>
					</span>
					<span>
					<el-button type="danger"  @click="closeDialog">
						<el-icon>
							<CircleCloseFilled/>
						</el-icon>
						关闭
					</el-button>
					</span>
				</div>
			</template>
			<div>
				<div class="content">
					<display-search
						v-show="showSearch"
						ref="DisplaySearchRef"
						class="detail-dialog-display-search"
						:showSearch="showSearch"
						v-bind="searchConfig"
						v-model="searchFormData"
						@resetQueryData="handleResetBtnClick"
						@queryData="handleQueryBtnClick"
					/>
					<display-table
						class="detail-dialog-display-table"
						ref="displayTableRef"
						:showIndexColumn="true" 
						:detailPropList="detailPropList" 
						:detailDataList="detailDataList"
						:showFooter="showFooter"
						:header_cell_style="header_cell_style"
						:getRowStyle="getRowStyle"
						:detailDataConut="detailDataConut"
						v-model:page="pageInfo">
						<template
							v-for="item in detailPropList"
							:key="item.prop"
							#[item.prop]="scope"
						>
						<!-- 上边如果报错,是编译器报错 -->
							<!-- 2023 06 07 需要两行显示文字,多余用省略号显示 悬浮后显示弹框 特定场景需要,否则不需要-->
							<el-tooltip
								v-if="item.maxTextLine || globalMaxTextLine"
								placement="top"
								v-model="scope.row.showTooltip"
								:disabled="!scope.row.showTooltip">
									<div 
									@mouseenter="showTips($event,scope.row,item.prop,item.maxTextLine||globalMaxTextLine||1,item.defaultValue)"
									class='myNote'
									:style="{'-webkit-line-clamp': item.maxTextLine||globalMaxTextLine||1,'line-clamp': item.maxTextLine||globalMaxTextLine||1}"
									>
										<slot :name="`table-${item.prop}`" :row="scope.row">
											{{(scope.row&&scope.row[item.prop]) ?? item.defaultValue}}
										</slot>
									</div>
								<template #content>
									<slot :name="`table-${item.prop}-tooltip-content`" :row="scope.row">
										{{(scope.row&&scope.row[item.prop]) ?? item.defaultValue}}
									</slot>
								</template>
							</el-tooltip>

							<slot v-else :name="`table-${item.prop}`" :row="scope.row">
								{{(scope.row&&scope.row[item.prop]) ?? item.defaultValue}}
							</slot>
						</template>

					</display-table>
				</div>
			</div>
		</el-dialog>
	</div>
	
</template>
<script setup>
import { ref,toRefs,computed,watch,getCurrentInstance,onMounted,nextTick,defineExpose} from "vue";
import DisplayTable from "./base-ui/DisplayTable.vue";
import DisplaySearch from "./base-ui/DisplaySearch.vue";
import { CircleCloseFilled} from '@element-plus/icons-vue'
const props=defineProps({
	getTableDataFunction:{//数据查询方法
		type:Function,
		require:false,
		default:()=>([])
	},
	detailPropList:{//表格的列以及属性
		type:Array,
		require:true,
		default:[]
	},
	showSearch:{//是否显示搜索区域
		type:Boolean,
		require:false,
		default:()=>true
	},
	showFooter:{//是否显示分页器
		type:Boolean,
		require:false,
		default:()=>true
	},
	searchConfig:{//搜索区域的表单配置
		type:Object,
		require:false,
		default:()=>({})
	},
	////////////////////////////////////////以下不用传////////////////////
	doSomeSthingbeforeQueryData:{//在初始化的时候做点什么
		type:Function,
		require:false,
		default:undefined
	},
	initSearchData:{//初始化搜索框的值,界面上也会有显示
		type:Object,
		require:false,
		default:()=>({})
	},
	fixedCondition:{//固定的搜索条件，每次查询数据都会带上
		type:Object,
		require:false,
		default:()=>({})
	}
});
const showDialog = ref(false);
const {detailPropList,showSearch,searchConfig}=toRefs(props);//只读的
const title=ref('数据详情');
const detailDataList = ref([]);//可修改的
const DisplaySearchRef = ref(null);//可修改的
const detailDataConut = ref(0);//可修改的
const emit=defineEmits(['close']);
const close=()=>{
    emit('close',false);
}
//放大缩小弹出框
const isFullScreen=ref(false);
const getFullScreen=()=>{
    isFullScreen.value=!isFullScreen.value;
};
//定义一个对象searchFormData，存储的是search的数据
const searchProps = searchConfig?.searchProps ?? []
const formOriginData = {}
for (const item of searchProps) {
	formOriginData[item.field] = ''
}
const searchFormData = ref(formOriginData)
const displayTableRef = ref()

//点击了查询按钮逻辑
const handleQueryBtnClick=()=>{
	pageInfo.value.currentPage=1
	getPageData()
};
//点击了清空按钮逻辑
const handleResetBtnClick=()=>{
	//把表单数据清空
	searchFormData.value = formOriginData;
	//改成第一页
	pageInfo.value.currentPage=1
	//重新查询
	getPageData()
};
const showTips = (obj, row,text,maxTextLine=1,defaultText)=>{
	//生成一个span元素,内容是text,挂载到body上,计算他的宽度,计算完后,删除
	let TemporaryTag = document.createElement('span');
	TemporaryTag.innerText = row[text] || defaultText;
	TemporaryTag.className = 'getTextWidth';
	document.querySelector('body').appendChild(TemporaryTag);
	let needWidth = document.querySelector('.getTextWidth').offsetWidth;
	document.querySelector('.getTextWidth').remove();
	//计算cell的宽度度
	const cellWidth = obj.target.offsetWidth
	needWidth <= (maxTextLine * cellWidth) ? row.showTooltip = false : row.showTooltip = true
}
//获取数据接口，接口内容由调用该组件的地方写，必须是返回promise的方法
const getPageData = async() =>{
	const {querysuccess,totalcount,datalist} = await props.getTableDataFunction(pageInfo.value.currentPage,pageInfo.value.pageSize,{...searchFormData.value,...props.fixedCondition})
	if(querysuccess){
		detailDataConut.value = totalcount
		detailDataList.value = datalist
	}
};
//监听子组件的分页器，如果变化，那么重新查询数据
const pageInfo = ref({ currentPage: 1, pageSize: 10 })
watch(pageInfo, () => getPageData())

// onMounted(()=>{
// 	nextTick(()=>{
// 		DisplaySearchRef.value.subModelValue = {...DisplaySearchRef.value.subModelValue,...props.initSearchData}
// 		searchFormData.value = {...searchFormData.value,...props.initSearchData}
// 		props.doSomeSthingbeforeQueryData && props.doSomeSthingbeforeQueryData(getCurrentInstance())
// 		getPageData()
// 	})
// })
watch(()=>showDialog.value,()=>{
	if(showDialog.value){
		//1遍历一下searchConfig?.value?.searchProps
		let firstQueryParams = {}
		searchConfig?.value?.searchProps?.forEach(item=>{
			if(item.defaultValue){
				firstQueryParams[item.field] = item.defaultValue
			}
		})

		nextTick(()=>{
			DisplaySearchRef.value.subModelValue = {...DisplaySearchRef.value.subModelValue,...props.initSearchData,...firstQueryParams}
			searchFormData.value = {...searchFormData.value,...props.initSearchData,...firstQueryParams}
			props.doSomeSthingbeforeQueryData && props.doSomeSthingbeforeQueryData(getCurrentInstance())
			getPageData()
		})
	}
})
//el-table表头样式
const header_cell_style = {
	// height: '3vh',
	// background: 'rgb(17,43,74)',
	// color: '#38C4FF',
	// 'font-size': '18px',
	// 'text-align': 'center',
	// 'font-weight': 400,
	// 'font-family': 'PingFangSC'
}
const getTableHeight = computed(()=>{
	if(isFullScreen.value){
		if(props.showSearch && props.showFooter){//有头有脚
			return 'calc(94% - 50px)'
		}else if(!props.showSearch && props.showFooter){//只有脚
			return 'calc(100% - 50px)'
		}else if(props.showSearch && !props.showFooter){//只有头
			return '94%'
		}else{
			return '100%'
		}
	}else{
		if(props.showSearch && props.showFooter){//有头有脚
			return 'calc(91% - 50px)'
		}else if(!props.showSearch && props.showFooter){//只有脚
			return 'calc(100% - 50px)'
		}else if(props.showSearch && !props.showFooter){//只有头
			return '91%'
		}else{
			return '100%'
		}
	}
})
const closeDialog =()=>{
	//1.关闭弹框
	showDialog.value = false
	//2.把数据初始化
	searchFormData.value = formOriginData
}
const getSearchHeight = computed(()=>{
	if(isFullScreen.value){
		return '6%'
	}else{
		return '9%';
	}
})
//el-table奇数和偶数行样式
const getRowStyle = ({ row, rowIndex }) => {
// 	if ((rowIndex + 1) % 2 === 0) {
// 		return "background:rgb(17,43,74);border:none;color:#FFFFFF;height:3vh;";
// 	} else {
// 		return "background:#000B1F;border:none;color:#FFFFFF;height:3vh;";
// 	}
}
defineExpose({
    showDialog
})
</script>
<style scoped>
.tabletext{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.detail-dialog{
	position: absolute;
}
.detail-dialog-display-table{
	width:100%;
}
/* 弹框上部空白缩小*/
.detail-dialog :deep() .el-dialog__body {
	padding: 10px;
}
/* 底部分页器居中*/
.detail-dialog-display-table :deep() .footer{
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* eldialog顶部样式*/
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>